<template>
    <div>
        <div class="table-class order-status">
            <div :class="{ 'status-select': queryParam.status == item.value }" v-for="item in orderStatus" :key="item.value"
                @click="onSelectStatusChange(item.value)">{{
                    item.label }}</div>
        </div>
        <div class="table-class query-param">
            <div><span>订单号:</span><el-input v-model="queryParam.orderNumber" placeholder="请输入内容"></el-input></div>
            <div><span>收货人:</span><el-input v-model="queryParam.recipientName" placeholder="请输入内容"></el-input></div>
            <div><span>手机号:</span><el-input v-model="queryParam.recipientPhone" placeholder="请输入内容"></el-input></div>
            <div><span>下单时间:</span><el-date-picker v-model="queryParam.orderTime" type="datetimerange" align="right"
                    unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker></div>
            <div>
                <el-button type="primary" @click="initPage">查询</el-button>
                <el-button type="primary">重置</el-button>
            </div>
        </div>
        <div class="table-class">
            <!-- 全部订单 待接单 待派送 派送中 已完成 已取消 -->
            <el-table :data="orderList" border style="width: 100%">
                <el-table-column fixed prop="orderNumber" label="订单号" width="200" :key="1">
                </el-table-column>
                <el-table-column v-if="waiting || preparing || delivering" prop="orderItems" :formatter="dishFormatter"
                    label="菜品" :key="2"></el-table-column>
                <el-table-column v-if="all" prop="status" :formatter="statusFormatter" label="订单状态" :key="3">
                </el-table-column>
                <el-table-column v-if="all || finished || canceled" prop="recipientName" label="订餐人" :key="4">
                </el-table-column>
                <el-table-column v-if="all || finished || canceled" prop="recipientPhone" label="手机号" :key="5">
                </el-table-column>
                <el-table-column prop="deliveryAddress" label="配送地址" :key="6">
                </el-table-column>
                <el-table-column v-if="waiting || preparing || delivering" prop="estimatedDeliveryTime" label="预计送达时间"
                    :key="7">
                </el-table-column>
                <el-table-column v-if="all || canceled" prop="orderTime" label="下单时间" width="160" :key="8">
                </el-table-column>
                <el-table-column v-if="finished" prop="actualDeliveryTime" label="送达时间" :key="9">
                </el-table-column>
                <el-table-column v-if="all || finished || waiting" prop="totalAmount" label="实收金额" :key="10">
                </el-table-column>
                <el-table-column v-if="waiting || preparing || delivering || finished" prop="notes" label="备注" :key="11">
                </el-table-column>
                <el-table-column v-if="preparing || delivering" prop="utensilQuantity" label="餐具数量" :key="12">
                </el-table-column>
                <el-table-column v-if="canceled" prop="cancelTime" label="取消时间" :key="13">
                </el-table-column>
                <el-table-column v-if="canceled" prop="cancelReason" label="取消原因" :key="14">
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="150" :key="15">
                    <template slot-scope="scope">
                        <!-- 接单 拒单 派送 完成 查看 -->
                        <el-button v-if="scope.row.status == 1" type="text" size="small"
                            @click="takeOrder(scope.row.id)">接单</el-button>
                        <el-button v-if="scope.row.status == 1" type="text" size="small"
                            @click="onCancelOrder(scope.row.id)">拒单</el-button>
                        <el-button v-if="scope.row.status == 2" type="text" size="small"
                            @click="readyOrder(scope.row.id)">派送</el-button>
                        <el-button v-if="scope.row.status == 3" type="text" size="small"
                            @click="finishOrder(scope.row.id)">完成</el-button>
                        <el-button v-if="scope.row.status == 0 || scope.row.status == 2 || scope.row.status == 3"
                            type="text" size="small" @click="onCancelOrder(scope.row.id)">取消</el-button>
                        <el-button v-if="scope.row.status == 4" type="text" size="small">退单</el-button>
                        <el-button type="text" size="small" @click="viewDetail(scope.row.id)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total,prev, pager, next,sizes" :total="page.total" :page-size.sync="page.size"
                :pager-count="5" :current-page.sync="page.page" :page-sizes="[1, 10, 20, 50, 100, 500]"
                @current-change="pageChange" @prev-click="page.page--" @next-click="page.page++" @size-change="sizeChange"
                :hide-on-single-page="false">
            </el-pagination>
        </div>
        <el-dialog title="订单详情" :visible.sync="dialogFormVisible" center>
            <el-descriptions :column="2">
                <el-descriptions-item label="订单号">{{ orderDetail.orderNumber }}</el-descriptions-item>
                <el-descriptions-item label="下单时间">{{ orderDetail.orderTime }}</el-descriptions-item>
                <el-descriptions-item label="订单状态">{{ orderDetail.status }}</el-descriptions-item>
                <el-descriptions-item label="订单金额">{{ orderDetail.totalAmount }}</el-descriptions-item>
                <el-descriptions-item label="支付时间">{{ orderDetail.paymentTime }}</el-descriptions-item>
                <el-descriptions-item label="支付方式">{{ orderDetail.paymentMethod }}</el-descriptions-item>
                <el-descriptions-item label="预计送达时间">{{ orderDetail.estimatedDeliveryTime }}</el-descriptions-item>
                <el-descriptions-item label="收货人">{{ orderDetail.recipientName }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ orderDetail.recipientPhone }}</el-descriptions-item>
                <el-descriptions-item label="地址">{{ orderDetail.deliveryAddress }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ orderDetail.notes }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1">
                <el-descriptions-item label="菜品">
                    <el-table :data="orderDetail.orderItems">
                        <el-table-column prop="dishName"></el-table-column>
                        <el-table-column prop="quantity"></el-table-column>
                        <el-table-column prop="amount"></el-table-column>
                    </el-table>
                </el-descriptions-item>
                <el-descriptions-item label="打包费">{{ orderDetail.packagingFee }}</el-descriptions-item>
                <el-descriptions-item label="合计金额">{{ orderDetail.totalAmount }}</el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="请选择取消原因" :visible.sync="refuseDialogVisible" width="30%">
            <el-select v-model="cancelReason.reason" placeholder="请选择">
                <el-option v-for="(item, index) in reasonOptions" :key="index" :label="item" :value="item">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog">取 消</el-button>
                <el-button type="primary" @click="cancelOrder">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { page, take_order, ready_order, finish_order, order_detail, order_cancel } from '@/api/order'
import { mapGetters } from 'vuex'
export default {
    //import引入组件才能使用
    components: {},
    props: {},
    data() {
        return {
            page: {
                page: 1,
                size: 1,
                total: 0
            },
            queryParam: {
                status: 0
            },
            orderList: [],
            orderStatus: [
                { label: '全部订单', value: 0 },
                { label: '待接单', value: 1 },
                { label: '备餐中', value: 2 },
                { label: '配送中', value: 3 },
                { label: '已完成', value: 4 },
                { label: '已取消', value: 5 }
            ],
            dialogFormVisible: false,
            refuseDialogVisible: false,
            orderDetail: {},
            cancelReason: {},
            reasonOptions: ['无法配送', '菜品已售罄', '其他']
        };
    },
    // 计算属性
    computed: {
        ...mapGetters(['shopId']),
        all() {
            return this.queryParam.status == 0
        },
        waiting() {
            return this.queryParam.status == 1
        },
        preparing() {
            return this.queryParam.status == 2
        },
        delivering() {
            return this.queryParam.status == 3
        },
        finished() {
            return this.queryParam.status == 4
        },
        canceled() {
            return this.queryParam.status == 5
        },
    },
    // 监听data中的数据变化
    watch: {

    },
    // 方法集合
    methods: {
        pageChange(page) {
            this.page.page = page
            this.initPage()
        },
        sizeChange(size) {
            this.page.size = size
            this.initPage()
        },
        initPage() {
            page({ ...this.page, ...this.queryParam, shopId: this.shopId }).then(res => {
                this.orderList = res.data.list
                this.page.total = res.data.total
            })
        },
        statusFormatter(row, column, cellValue, index) {
            //1:待接单, 2:备餐中, 3:配送中,4:已完成, 5:已取消
            switch (cellValue) {
                case 1:
                    return '待接单'
                case 2:
                    return '备餐中'
                case 3:
                    return '配送中'
                case 4:
                    return '已完成'
                case 5:
                    return '已取消'
                default:
                    return '待付款'
            }
        },
        dishFormatter(row, column, cellValue, index) {
            let dishNames = ''
            row.orderItems.forEach(item => {
                dishNames += item.dishName + 'x' + item.quantity + ' '
            })
            return dishNames
        },
        onSelectStatusChange(status) {
            this.queryParam.status = status
            this.initPage()
        },
        takeOrder(id) {
            take_order(id).then(res => {
                this.$message.success('接单成功')
                this.initPage()
            })
        },
        readyOrder(id) {
            ready_order(id).then(res => {
                this.$message.success('开始派送')
                this.initPage()
            })
        },
        finishOrder(id) {
            finish_order(id).then(res => {
                this.$message.success('配送完毕')
                this.initPage()
            })
        },
        viewDetail(id) {
            order_detail(id).then(res => {
                this.orderDetail = res.data
                this.dialogFormVisible = true
            })
        },
        onCancelOrder(id) {
            this.cancelReason.orderId = id
            this.refuseDialogVisible = true
        },
        cancelOrder() {
            order_cancel(this.cancelReason).then(res => {
                this.$message.success('取消订单成功')
                this.initPage()
                this.refuseDialogVisible = false
                this.cancelReason = {}
            }).catch(err => {
                this.$message.error('取消订单失败')
            })
        },
        cancelDialog() {
            this.refuseDialogVisible = false
            this.cancelReason = {}
        }
    },
    // 生命周期，创建完成时（可以访问当前this实例）
    created() {
        this.initPage()
        this.$bus.$on('test_bus', (data) => {
            console.log(data)
        })
    },
    // 生命周期：挂载完成时（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { },//生命周期：创建之前
    beforeMount() { },//生命周期：挂载之前
    beforeUpdate() { },//生命周期：更新之前
    updated() { },//生命周期：更新之后
    beforeDestroy() { },//生命周期：销毁之前
    destroyed() { },//生命周期：销毁完成
    activated() { },//如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style scoped>
.order-status {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.status-select {
    border-bottom: 2px solid #3f7fef;
}

.order-status div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    cursor: pointer;
}

.order-status div:not(.status-select) {
    border: 0.5px solid #363636;
}

.query-param {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.query-param div {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-right: 5px;
}

.query-param div span {
    width: 100px;
}
</style>